import React, { Component } from "react";
import kPLModel from "../model/kPLModel";
export default class KPL extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
    };
  }
  async componentDidMount() {
    let {data}=await kPLModel.query({});
    console.log(data);
    this.state.list=data;
    console.log(this.state.list)
  }
  
  add=(id,age,club,shunt)=>{
    //   console.log(id,age,club,shunt)
    if(id!=""&&age!="",club!="",shunt!=""){
        // axios.post("/mock",{
        //     params:{
        //         name:id,
        //         age,
        //         club,
        //         shunt,
        //         checked:false
        //     }
        // }).then((res)=>{
        //     console.log(res.data)
        // })
        console.log('123')
    }else{
        alert("内容不能为空")
    }
  }
  render() {
    return <div>
        <div className="kpl">
            <div className="search">
            <div><input type="text" onChange={()=>{}} ref="searchName"></input> <button>搜索</button></div>
            </div>
            <div className="add">
                <div className="tr">
                    <div className="td">
                        <span>选手ID：</span><input type="text" onChange={()=>{} } ref="id"></input>
                    </div>
                    <div className="td">
                    <span>年龄：</span><input type="text" onChange={()=>{}} ref="age"></input>
                    </div>
                </div>
                <div className="tr">
                    <div className="td">
                    <span>俱乐部：</span><input type="text" onChange={()=>{}} ref="club"></input>
                    </div>
                    <div className="td">
                    <span>分路：</span><input type="text" onChange={()=>{}} ref="shunt"></input>
                    </div>
                </div>
                <div className="tr">
                    <button onClick={()=>{this.add(this.refs.id.value,this.refs.age.value,this.refs.club.value,this.refs.shunt.value)}}>添加</button>
                </div>
            </div>
            <div className="show">
                <div className="tr">
                    <div className="td">全选</div>
                    <div className="td">编号</div>
                    <div className="td">选手ID</div>
                    <div className="td">年龄</div>
                    <div className="td">俱乐部</div>
                    <div className="td">分路</div>
                    <div className="td">操作</div>
                    <div className="td">操作</div>
                </div>
                {this.state.list.map(item=>{
                    return <div className="tr" key={item.id}>
                    <div className="td"><input type='checkbox'></input></div>
                    <div className="td">{item.id}</div>
                    <div className="td">{item.name}</div>
                    <div className="td">{item.age}</div>
                    <div className="td">{item.club}</div>
                    <div className="td">{item.shunt}</div>
                    <div className="td">删除</div>
                    <div className="td">修改</div>

                </div>
                })}

                
            </div>

            
        </div>
    </div>;
  }
}
